<script>
import {Login, mobieCodeBtn, mobieLogin, outlogin, viewLogin, zhuce, zhuceCode} from "@/API/http";
import {mapState} from "vuex";

export default {
  name: "loginPage",
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      state: state => state.user.state,
    })
  },
  data() {
    return {
      // 这是对话框
      flag: true,
      visible: false,
      // 这是登录
      formInline: {
        user: '',
        password: '',
        code: '',
        mobieUser: '',
        zcuser: '',
        zcpassword: '',
        zcpassword1: '',
        nickname: '',
        zcmobie: '',
        zcCode: '',

      },
      //登录状态
      // state:false,
      // 这是登录请求
      LoginList: [],
      // 手机登录
      zcList: [],
      // 普通登录
      ptList: []
    }
  },
  methods: {
    // zhuce,
    // 普通登录方法
    LoginBtnBox() {
      Login({
        username: this.formInline.user,
        password: this.formInline.password,
        rememberMe: true
      }).then(res => {
        // console.log(res)
        if (res.code === 0) {
          // console.log(res)
          this.visible = false
          // this.ptList=res.userInfo
          // this.state = true
          this.$store.commit('setstate', {state: true})
          this.$store.commit('setUser', {userInfo: res.userInfo})
        } else {
          this.$message.info(res.msg);
        }
      })
    },
    // 手机登录
    mobieBtn() {
      mobieLogin({
        mobile: this.formInline.mobieUser,
        code: this.formInline.code,
        rememberMe: true
      }).then(res => {
        if (res.code === 0) {
          // console.log(res)
          // this.ptList=res.userInfo
          this.$store.commit('setUser', {userInfo: res.userInfo})

          this.visible = false
          // console.log(this.zcList)
          // this.state = true
          this.$store.commit('setstate', {state: true})
        } else {
          this.$message.info(res.msg);
        }
      })
    },
    // 获取登录验证码
    mobieCodeBtn() {
      // console.log(this.formInline.mobieUser)
      mobieCodeBtn(this.formInline.mobieUser).then(res => {
        console.log(res)
      })
    },
    // 这是对话框
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    // 这是登录
    handleSubmit(e) {
      console.log(e)
      console.log(this.formInline);
    },
    // 注册和登录框切换
    zhuceBtn() {
      this.flag = !this.flag;
    },
    dengluBtn() {
      this.flag = !this.flag;
    },
    // 这是注册验证码
    zcCodeBtn() {
      console.log(this.formInline.zcmobie)
      zhuceCode(this.formInline.zcmobie).then(res => {
        // console.log(res)
        if (res.code === 0) {
          console.log('注册验证码')
        } else {
          this.$message.info(res.msg);
        }
      })
    },
    // 这是注册按钮
    ZcBtn() {
      zhuce({
        loginName: this.formInline.zcuser,
        password: this.formInline.zcpassword,
        code: this.formInline.zcCode,
        mobile: this.formInline.zcmobie,
        nickname: this.formInline.nickname
      }).then(res => {
        if (res.code === 0) {
          this.$message.info(res.msg);
        } else {
          this.$message.info(res.msg);
        }
      })
    },
    // 推出登录
    tuichuLogin() {
      outlogin().then(res => {
        // console.log(res)
        if (res.code === 0) {
          // this.state = false
          this.$store.commit('setstate', {state: false})

        } else {
          this.$message.info(res.msg);
        }
      })
    }

  },
  created() {
    console.log(this.userInfo)
    viewLogin().then(res => {
      console.log(res)
      if (res.code === 0) {
        // this.ptList=res.data
        this.$store.commit('setUser', {userInfo: res.data})
        // this.state = true
        this.$store.commit('setstate', {state: true})

      }
    })
  }
}
</script>

<template>
  <div>
    <!--    这是对话框-->
    <div>
      <div>
        <div v-if="!state" style="">
          <div class="VipBox">
            <p>开通Vip免费观看全站视频</p>
          </div>
          <div class="loginBtn" @click="showModal">登录/注册</div>
        </div>
        <!--        头像-->
        <div style="margin-left: 5px" v-if="state">
          <a-dropdown>
            <a class="ant-dropdown-link nicknameBox" @click="e => e.preventDefault()">
              <div style="display: flex;align-items: center">
                <a-avatar style="margin-right: 15px" :src="userInfo.avatarUrl"/>
                <div>
                  <img src="@/assets/vip钻石.png" alt="" class="assetsImg" width="15px">
                  <p class="userName">{{ userInfo.nickname }}</p>
                  <p class="vip">青铜会员</p>
                </div>
              </div>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <router-link to="/personal">个人中心</router-link>
              </a-menu-item>
              <a-menu-item>
                <router-link to="/personal">我的课程</router-link>
              </a-menu-item>
              <a-menu-item>
                <router-link to="/personal">我的订单</router-link>
              </a-menu-item>
              <a-menu-item>
                <p @click="tuichuLogin">退出登录</p>
              </a-menu-item>
            </a-menu>
          </a-dropdown>

        </div>
      </div>
      <!--      对话框1-->
      <a-modal v-show="flag" v-model="visible" title="" @ok="handleOk" :footer="null" width="340px">
        <!--        Tab框-->
        <a-tabs default-active-key="1" style="text-align: center;height: 245px">
          <a-tab-pane key="1">
            <span slot="tab">
              <!--            上面的切换-->
              <a-icon type=""/>
              账号登录
            </span>
            <!-- 下面的登录-->
            <div>
              <a-form-model :model="formInline" @submit="handleSubmit" @submit.native.prevent>
                <a-form-model-item>
                  <a-input v-model="formInline.user" placeholder="账号">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
                <a-form-model-item>

                  <a-input v-model="formInline.password" type="password" placeholder="密码">
                    <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
                  </a-input>


                </a-form-model-item>
                <a-form-model-item>
                  <a-button

                      type="primary"
                      html-type="submit"
                      style="width: 100%"

                  >
                    <div @click="LoginBtnBox" style="width: 100%">登录</div>

                  </a-button>

                </a-form-model-item>
                <div style="display: flex;justify-content: space-between;cursor: pointer">
                  <p @click="zhuceBtn">
                    去注册
                  </p>
                  <p>
                    去修改
                  </p>
                </div>
              </a-form-model>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2">
            <!--            上面的切换-->
            <span slot="tab">
              <a-icon type=""/>
              手机登录
            </span>
            <div>
              <!-- 下面的手机号登录-->
              <a-form-model :model="formInline" @submit="handleSubmit" @submit.native.prevent>
                <a-form-model-item>
                  <a-input v-model="formInline.mobieUser" placeholder="账号">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
                <a-form-model-item>
                  <div class="getCodeBox">
                    <a-input v-model="formInline.code" type="text" placeholder="验证码" class="CodeInput"
                             style="width: 100%">
                      <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
                    </a-input>
                    <div class="getCode" @click="mobieCodeBtn">
                      获取验证码
                    </div>
                  </div>
                </a-form-model-item>
                <a-form-model-item>
                  <a-button
                      type="primary"
                      html-type="submit"
                      style="width: 100%"
                  >

                    <div @click="mobieBtn">登录</div>
                  </a-button>

                </a-form-model-item>
                <div style="display: flex;justify-content: space-between;cursor: pointer">
                  <p @click="zhuceBtn">
                    去注册
                  </p>
                  <p>
                    去修改
                  </p>
                </div>
              </a-form-model>
            </div>

          </a-tab-pane>
        </a-tabs>
      </a-modal>
      <!--      这是第二个对话框-->
      <a-modal v-show="!flag" v-model="visible" title="" @ok="handleOk" :footer="null" width="380px"
               style="padding: 30px !important">
        <!--         注册-->
        <div class="zhuceBox">
          <div class="putongzhuce">普通注册</div>
          <a-form-model layout="vertical" :model="formInline" @submit="handleSubmit" @submit.native.prevent>
            <a-form-model-item>
              <p class="leftBox">账户名:</p>
              <a-input v-model="formInline.zcuser" placeholder="账号">
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <p class="leftBox">密码:</p>
              <a-input v-model="formInline.zcpassword" type="text" placeholder="密码">
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <p class="leftBox">确认密码:</p>
              <a-input v-model="formInline.zcpassword1" type="text" placeholder="确认密码">

              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <p class="leftBox">昵称:</p>
              <a-input v-model="formInline.nickname" type="text" placeholder="昵称">

              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <p class="leftBox">手机号:</p>
              <a-input v-model="formInline.zcmobie" type="text" placeholder="手机号">

              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <div style="display: flex;justify-content: space-between;cursor: pointer">
                <p class="leftBox">验证码:</p>
                <a-input v-model="formInline.zcCode" type="text" placeholder="验证码" style="width: 50%">

                </a-input>
                <div class="ZcCodeBtn" @click="zcCodeBtn">
                  获取验证码
                </div>
              </div>

            </a-form-model-item>
            <a-form-model-item>
              <a-button style="width: 100%"
                        type="primary"
                        html-type="submit"
                        @click="ZcBtn"
              >
                注册
              </a-button>

            </a-form-model-item>
            <div @click="dengluBtn" style="cursor: pointer;margin-top: 15px">
              去登录
            </div>
          </a-form-model>
        </div>
      </a-modal>

    </div>
  </div>
</template>

<style scoped lang="less">

.leftBox {
  line-height: 30px;
  margin-right: 5px;
  text-align: right;
  width: 75px;
}

:deep(.ant-form-item-children) {
  display: flex;
}

//登录模态框
:deep(.ant-modal-content) {
  border-radius: 5px;
}

.userName {
  color: white;
  font-weight: bold;
}

.assetsImg {
  position: absolute;
  bottom: 5px;
  left: 20px;
}

p {
  margin: 0;
}

.vip {
  font-weight: bold;
  color: #ab753f;
}

.nicknameBox {
  position: relative;
  font-size: 14px;
  color: black !important;
}

.putongzhuce {
  width: 60px;
  margin: 0 auto;
  margin-bottom: 20px;
  border-bottom: 2px solid #42b983;
}

.getCode {
  color: white;
  border-radius: 5px;
  background: #42b983;
  width: 65%;
  margin-left: 10px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  transition: background 0.5s;
  cursor: pointer;
}

.getCode:hover {
  background: #23db9b;
}

.loginBtn {
  padding: 2px 10px;
  width: auto;
  height: auto;
  box-shadow: none;
  color: black;
  font-size: 16px;
  font-weight: bold;
  border: 0;
  background: #fff;
  border-radius: 20px; 0.
  box-shadow: 1px 1px 5px gray;
  cursor: pointer;
}

.loginBtn:hover {
  color: black;
}

.ZcCodeBtn {
  border-radius: 5px;
  color: white;
  background: #42b983;
  width: 40%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  transition: background 0.5s;
  cursor: pointer;
  margin-left: 5px;
}

.ZcCodeBtn:hover {

  background: #23db9b;
}

.getCodeBox {
  width: 100%;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

:deep(.ant-btn) {
  background: #00cf8c;
  border-radius: 5px;
  border: 0;
}

:deep(.ant-btn:hover) {
  background: #00cf8c;
}

:deep(.ant-input) {
  border-radius: 5px;
}

//:deep(.ant-btn:hover){
//  background: rgba(0,0,0,0);
//}
.VipBox {
  line-height: 30px;
  right: -35px;
  top: -43px;
  position: absolute;
  height: 43px;
  width: 163px;
  background: url("@/assets/vip.png");
  text-align: center;

  p {
    color: white;
    font-size: 12px;
  }
}
</style>